<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>upm.io</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
        <link rel="stylesheet" href="assets/js/libs/fancybox/jquery.fancybox.css" />
        <link rel="stylesheet" href="assets/css/bootstrap-switch.min.css" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="page-project" data-page="project">
        <?php include("common-tpl/topnav.php") ?>
        <?php include("common-tpl/topstatus-project.php") ?>
        
        <div class="container ptm pbm">
            <!-- <div class="col-md-2">
                <div class="clearfix">
                    <div class="fn-left">
                        <h4>项目管理</h4>
                    </div>
                </div>
                <table class="table table-bordered">
                    <tr>
                      <td><a href="project-list.php">项目清单</a></td>
                    </tr>
                    <tr>
                      <td><a href="project-create.php">创建项目</a></td>
                    </tr>
                </table>
            </div> -->
            <div class="col-md-12">
                <div class="row pbl">
                    <div class="col-md-12">
                        <p class="ptl">项目信息</p>

                        <table class="table table-bordered" id="baseInfo">
                            
                        </table>

                        <script type="text/x-jquery-tmpl" id="baseInfoTemplate">
                            <tr>
                                <td>项目编号</td>
                                <td>${project.code}</td>
                                <td>项目名称</td>
                                <td>${project.name}</td>
                                <td>项目所属</td>
                                <td>${project.owner}</td>
                            </tr>
                            <tr>
                                <td>数据中心</td>
                                <td>${project.dc}</td>
                                <td>资源池</td>
                                <td>${project.pool}</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </script>
                        
                        <div class="tabdiv">

                          <!-- Nav tabs -->
                          <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                              <a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">管理</a>
                            </li>
                            <li role="presentation" style="display:none;">
                              <a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab" >配置</a>
                            </li>
                            <li role="presentation" style="display:none;">
                              <a href="#tab3" aria-controls="messages" role="tab" data-toggle="tab">日志</a>
                            </li>
                            <li role="presentation" style="display:none;">
                              <a href="#tab4" aria-controls="settings" role="tab" data-toggle="tab">性能监控</a>
                            </li>
                          </ul>

                          <!-- Tab panes -->
                          <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="tab1">

                                <div class="bg-gray mtsm mbsm control_bar">
                                    <button class="btn btn-default" type="button" id="start_services_btn" data-submit="start_services" data-type="PUT">运行</button>
                                    <button class="btn btn-default" type="button" id="stop_services_btn" data-submit="stop_services" data-type="PUT">停止</button>
                                    <button class="btn btn-default" type="button" id="" data-submit="" data-type="PUT" disabled="disabled">添加</button>
                                    <button class="btn btn-default" type="button" id="" data-submit="" data-type="DELETE" disabled="disabled">删除</button>
                                    <button class="btn btn-default" type="button" id="" data-submit="" data-type="PUT" disabled="disabled">修改</button>
                                </div>

                                <table id="project-service" class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <td><input class="checked_all mrs" id="checked_all" type="checkbox"><label for="checked_all">全选</label></td>
                                            <td>服务标记</td>
                                            <td>组件</td>
                                            <td>版本</td>
                                            <td>关联服务</td>
                                            <td>状态</td>
                                            <td>实例数量</td>
                                            <td>自动愈合</td>
                                            <td>自动伸缩</td>
                                            <td>高可用</td>
                                            <td>访问入口</td>
                                            <td>访问凭据</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>

                                <script type="text/x-jquery-tmpl" id="projectServiceTemplate">
                                    <tr>
                                        <td><input class="form_checkbox mrs" data-postid="${service.id}" data-name="${service.name}" type="checkbox"></td>
                                        <td>${service.name}</td>
                                        <td>${service.image_name}</td>
                                        <td>${service.version}</td>
                                        <td>{{each service.link_to}}<div>${$value.name}</div>{{/each}}</td>
                                        <td data-status="${service.status}">${service.status_t}<div class="status-color status-${service.class}"><span class="glyphicon glyphicon-${service.class}"></span></div></td>
                                        <td>${service.node_num}</td>
                                        <td>${service.auto_healing}</td>
                                        <td>${service.auto_scaling}</td>
                                        <td>${service.hight_available}</td>
                                        <td>${service.access_entrance}</td>
                                        <td>
                                            <button type="button" class="btn btn-default btn-xs btnacc ${service.access_btn}"  data-accessuser="${service.access_user}" data-accesspassword="${service.access_password}">
                                                <span aria-hidden="true" class="glyphicon glyphicon-pushpin"></span>
                                                凭据
                                            </button>
                                        </td>
                                    </tr>
                                </script>

                            </div>
                            <div role="tabpanel" class="tab-pane disabled" id="tab2">尽情期待</div>
                            <div role="tabpanel" class="tab-pane disabled" id="tab3">尽情期待</div>
                            <div role="tabpanel" class="tab-pane disabled" id="tab4">尽情期待</div>
                          </div>

                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </div>


        <div class="modal fade" id="addNewService" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">添加服务规则</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row mbm">
                            <div class="col-md-3">
                                  服务标识
                            </div>
                            <div class="col-md-4">
                                  <input type="text" class="form-control input-sm" id="" name="">
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                选择服务类型
                            </div>
                            <div class="col-md-4">
                                <select name="" id="" class="form-control  input-sm">
                                    <option value="apache">apache  </option>
                                    <option value="nginx">nginx</option>
                                    <option value="tonging">tonging</option>
                                    <option value="jboss">jboss</option>
                                    <option value="tomcat">tomcat</option>
                                    <option value="rabbitmq">rabbitmq</option>
                                    <option value="activemq">activemq</option>
                                    <option value="redis">redis</option>
                                    <option value="couchbase">couchbase</option>
                                    <option value="mysql">mysql</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  服务版本
                            </div>
                            <div class="col-md-4">
                                  <select name="" id="" class="form-control  input-sm">
                                    <option value="1.0">1.0  </option>
                                    <option value="2.0">2.0</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  实例数量
                            </div>
                            <div class="col-md-4">
                                <input type="number" class="form-control input-sm" id="" name="" max="8" min="1" value="1">
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  直接访问入口
                            </div>
                            <div class="col-md-3">
                                <input type="checkbox" name="my-checkbox" data-size="mini" checked>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  自动愈合
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="my-checkbox" data-size="mini" checked>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  自动伸缩
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="my-checkbox" data-size="mini" checked>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-3">
                                  高可用
                            </div>
                            <div class="col-md-4">
                                <input type="checkbox" name="my-checkbox" data-size="mini" checked>
                            </div>
                        </div>
                        <div class="row mbm">
                            <div class="col-md-8">
                                <table class="table table-bordered">
                                  <thead>
                                    <tr class="active">
                                      <td>关联服务类型</td>
                                      <td>服务指向</td>
                                      <td>操作</td>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>
                                          <select name="" id="" class="form-control  input-sm">
                                              <option value="1.0">1.0  </option>
                                              <option value="2.0">2.0</option>
                                          </select>
                                      </td>
                                      <td>
                                          <select name="" id="" class="form-control  input-sm">
                                              <option value="1.0">redis-25h3</option>
                                              <option value="2.0">redis-25h3</option>
                                          </select>
                                      </td>
                                      <td>
                                        <button type="button" class="btn btn-default btn-sm addNew">
                                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                        </button>
                                      </td>
                                    </tr>
                                  </tbody>
                                  <tfoot>
                                    <tr>
                                      <td></td>
                                      <td></td>
                                      <td><button type="button" class="btn btn-default btn-sm addNew">
                                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                        </button></td>
                                    </tr>
                                  </tfoot>
                              </table>
                            </div>
                        </div>
                        <div class="row mbm">
                          <div class="prl text-right">
                            <button type="button" class="btn btn-primary next" data-dismiss="modal">创建</button>
                            <button type="button" class="btn cancal" data-dismiss="modal">取消</button>
                          </div>
                        </div>
                    </div><!--//modal-body-->
                </div>
            </div>
        </div>

        <div class="modal fade" id="addNewService" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">项目详情</h4>
                    </div>
                    <div class="modal-body">
                    </div><!--//modal-body-->
                </div>
            </div>
        </div>

        <div class="modal fade" id="control_pop" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><span class="text_type"></span>项目清单</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="control_list_wrap">
                                    <table id="control_list" class="table table-bordered">
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="clearfix pbm">
                                    <button id="submit_btn" class="btn btn-default btn-primary" type="button">确定</button>
                                    <button id="cancel_btn" class="btn btn-default" type="button" data-dismiss="modal">取消</button>
                                </div>
                                <script type="text/x-jquery-tmpl" id="controlTemplate">
                                    <tr>
                                        <td>项目名称:</td>
                                        <td><span data-postid="${postid}">${name}</span></td>
                                    </tr>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="alert_pop2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">访问凭据</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row txtC">
                            <div class="col-sm-12">
                                <table id="" class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>用户名：</td>
                                            <td class="username"></td>
                                        </tr>
                                        <tr>
                                            <td>密码：</td>
                                            <td class="password"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button type="button" class="btn cancel" data-dismiss="modal">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        







        <?php include("common-tpl/bottomtpl.php") ?>

        <script src="assets/js/seajs/sea.js"></script>
        <script type="text/javascript">
            seajs.use('seajs/compass.js');
        </script>
    </body>
</html>
